<template>
  <div>
    <van-nav-bar
      class="head"
      title="口碑榜单"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 左对齐 -->
    <van-row
      type="flex"
      class="van_row"
      v-for="(item, index) in list"
      :key="index"
    >
      <van-col span="9"><van-image :src="item.src" /></van-col>
      <van-col span="14" class="van_p_footer">
        <p>我是</p>
        <p>{{ item.name }}</p>
      </van-col>
    </van-row>
    <div class="nps">
      <p>我正在参与品质商家口碑评分</p>
      <p>NPS</p>
      <p>消费者口碑推荐排行榜</p>
    </div>
    <van-row>
      <van-col span="6"></van-col>
      <van-col span="8"><van-image class="img" src="" /></van-col>
      <van-col span="10"></van-col>
    </van-row>

    <div class="footer">
      <van-button type="primary" block>点击分享</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: "任同学^^^Andy",
          src: "",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/mouth" }).catch((error) => error);
    },
  },
};
</script>
<style scoped lang="less">
.head {
  height: 51px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(239, 239, 239, 1);
  top: 0;
}
.van_row {
  margin-top: 69px;
  .van-image {
    width: 80px;
    height: 80px;
    margin-left: 43px;
  }
  .van_p_footer {
    p {
      padding: 5px 0;
      margin: 0;
      font-size: 16px;
    }
  }
}
.van_p {
  justify-content: center;
}
.nps {
  text-align: center;
}
.img {
  width: 181px;
  height: 181px;
}
/deep/.van-nav-bar .van-icon {
  color: rgba(153, 153, 153, 1);
}
.van-nav-bar__title {
  color: rgba(42, 131, 78, 1);
  font-size: 18px;
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>
